<template>
    <div class="app-container">

        <h2 style="text-align: center;">发布公告</h2>

        <el-form label-width="120px">
            <el-form-item label="公告标题">
                <el-input v-model="annoInfo.title" placeholder="" />
            </el-form-item>

            <el-form-item label="公告内容">
                <tinymce :height="300" v-model="annoInfo.contentText" />
            </el-form-item>

            <el-form-item label="公告附属图片">
                <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                    :action="BASE_API + '/eduoss/fileoss'" class="avatar-uploader">
                    <img :src="annoInfo.image" class="image">
                </el-upload>
            </el-form-item>

            <el-form-item label="公告优先级">
                <el-select v-model="Pvalue" placeholder="请选择">
                    <el-option v-for="item in prioritys" :key="item.Pvalue" :label="item.label" :value="item.Pvalue">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="公告对象">
                <el-select v-model="TSvalue" placeholder="请选择" style="float: left;margin-right: 2%;">
                    <el-option v-for="item in TeaOrStu" :key="item.TSvalue" :label="item.label" :value="item.TSvalue">
                    </el-option>
                </el-select>

                <div class="block" @click="selectCourseStu()">
                    <span class="demonstration">课程学生</span>
                    <el-cascader :options="options" :props="{ multiple: true }" placeholder="请选择学生信息"
                        @change="insuranceNameSelect" @remove-tag="removeTagSelect" clearable></el-cascader>
                </div>

            </el-form-item>
            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">发布公告</el-button>
            </el-form-item>

        </el-form>

        <div style="margin-top: 20%;"></div>


    </div>
</template>
<script>
import announcement from '@/api/edu/announcement'
import Tinymce from '@/components/Tinymce'   //引入组件
export default {
    // 声明组件
    components: { Tinymce },
    data() {
        return {
            // 设置多选框
            props: { multiple: true },
            BASE_API: process.env.BASE_API, // 接口API地址,
            annoId: '',
            annoInfo: {
                title: '',
                contentText: '',
                image: '/static/公告附属图片.png',
                // 学生id集合
                stuArrays: [],
                // 优先级
                priority: '',
                userType: '',
            },
            tempArrays: [],

            // 公告优先级选择
            prioritys: [{
                Pvalue: '1',
                label: '一级公告'
            }, {
                Pvalue: '2',
                label: '二级公告'
            }, {
                Pvalue: '3',
                label: '三级公告'
            }],
            Pvalue: '',

            // 老师学生选择
            TeaOrStu: [{
                TSvalue: '1',
                label: '所有老师'
            }, {
                TSvalue: '2',
                label: '所有学生'
            }],
            TSvalue: '',

            // 课程学生多选框
            options: [],

        }
    },

    created() {
        // 如果路由里面有id,说明是更新公告信息
        if (this.$route.params && this.$route.params.id) {
            this.annoId = this.$route.params.id;
            // 调用方法根据公告id查询公告信息
            this.getAnnoInfo();
            this.selectCourseStu();
        } else {
            this.selectCourseStu();
        }
    },

    methods: {
        // 查询课程信息和学生信息
        selectCourseStu() {
            announcement.selectCourseStu().then(response => {
                this.options = response.data.options;
                console.log(this.options.children.value)
            })
        },
        // 文件上传成功执行的方法
        handleAvatarSuccess(res, file) {
            this.annoInfo.image = res.data.url;
        },

        // 在选择课程学生信息的时候，变化就执行这个方法
        insuranceNameSelect(val) {
            // console.log("传递过来的值是："+val);
            this.annoInfo.stuArrays = [];
            for (let i = 0; i < val.length; i++) {
                this.annoInfo.stuArrays.push(val[i][1]);
            }
        },
        removeTagSelect(tag) {
            console.log("传递过来的tag：" + tag);
        },
        //点击发布公告执行的方法 
        saveOrUpdate() {
            if (this.$route.params && this.$route.params.id) {
                // 说明是更新公告信息
                this.updateAnno();
            } else {
                // 说明是新发布公告信息
                this.saveAnno();
            }
        },
        updateAnno() {

            this.annoInfo.priority = this.Pvalue;
            this.annoInfo.userType = this.TSvalue;
            this.$confirm('此操作将更新公告, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.annoInfo.contentText = this.annoInfo.contentText.replace(/<p>/g, '').replace(/<\/p>/g, '');
                announcement.updateAnno(this.annoInfo,this.annoId).then(response => {
                    // 提示信息
                    this.$message({
                        type: 'success',
                        message: '公告更新成功!'
                    });
                    this.$router.push({ path: '/announcement/annolist' })
                })
            })
        },
        // 发布公告
        saveAnno() {
            this.annoInfo.priority = this.Pvalue;
            this.annoInfo.userType = this.TSvalue;
            console.log("数字：" + this.annoInfo.stuArrays)
            this.$confirm('此操作将发布公告, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.annoInfo.contentText = this.annoInfo.contentText.replace(/<p>/g, '').replace(/<\/p>/g, '');
                announcement.publish(this.annoInfo).then(response => {
                    // 提示信息
                    this.$message({
                        type: 'success',
                        message: '公告发布成功!'
                    });
                    this.$router.push({ path: '/announcement/annolist' })
                })
            })
        },
        getAnnoInfo() {
            announcement.selectInfo(this.annoId).then(response => {
                this.annoInfo = response.data.anno;
                this.Pvalue = this.annoInfo.priority;
                this.TSvalue = this.annoInfo.userType;
            });
        }
    }
}
</script>


<style scoped>
.tinymce-container {
    line-height: 29px;
}
</style>